<template>
	<div>
		<mj-title type="h2" title="InputNumber 数字输入框"></mj-title>
		<div class="page-desc">使用鼠标或键盘输入一定范围的标准数值。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-input-number v-model="value" @focus="onfocus" @blur="onblur" :change="onchange"></mj-input-number>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;div>
							&lt;mj-input-number v-model="value" @focus="onfocus" @blur="onblur" :change="onchange">&lt;/mj-input-number>
						&lt;/div>
					&lt;/template>
					&lt;script>
					export default {
						data() {
						    return {
						    	value:1,
						    }
						},	
						methods:{
							onfocus(val){
								console.log('focus',val)
							},
							onblur(val){
								console.log('blur',val)
							},
							onchange(val){
								console.log('change',val)
							}
						}
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="禁用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-input-number v-model="value2" :disabled="true"></mj-input-number>
				<div class="page-desc mt10">通过设置<code>disabled</code>属性禁用输入框</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-input-number v-model="value2" :disabled="true">&lt;/mj-input-number>
					&lt;/template>
					&lt;script>
					export default {
						data() {
						    return {
						    	value2:1,
						    }
						},	
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="设置最大最小值"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-input-number v-model="value3" :max="10" :min="1"></mj-input-number>
				<div class="page-desc mt10">通过设置<code>max</code>，<code>min</code>属性，定义最大最小值"</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-input-number v-model="value3" :max="10" :min="1">&lt;/mj-input-number>
					&lt;/template>
					&lt;script>
					export default {
						data() {
						    return {
						    	value3:1,
						    }
						},	
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="设置步长"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-input-number v-model="value4" :step="5"></mj-input-number>
				<div class="page-desc mt10">通过设置<code>:step="5"</code>控制每次步伐</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-input-number v-model="value4" :step="5">&lt;/mj-input-number>
					&lt;/template>
					&lt;script>
					export default {
						data() {
						    return {
						    	value4:1,
						    }
						},	
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="尺寸"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-input-number v-model="value5" size="large"></mj-input-number>
				<mj-input-number v-model="value5" style="margin:0 20px;"></mj-input-number>
				<mj-input-number v-model="value5" size="small"></mj-input-number>
				<div class="page-desc mt10">通过设置<code>size</code>属性为<code>large</code>和<code>small</code>将输入框设置为大和小尺寸，不设置为默认（中）尺寸。</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-input-number v-model="value5" size="large">&lt;/mj-input-number>
						&lt;mj-input-number v-model="value5">&lt;/mj-input-number>
						&lt;mj-input-number v-model="value5" size="small">&lt;/mj-input-number>
					&lt;/template>
					&lt;script>
					export default {
						data() {
						    return {
						    	value5:1,
						    }
						},	
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="按钮位置"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-input-number placeholder="111" v-model="value5" controls-position="right" :max="5" :min="0" size="large"></mj-input-number>
				<mj-input-number placeholder="111" v-model="value5" controls-position="right" :max="5" :min="0" style="margin:0 20px;"></mj-input-number>
				<mj-input-number placeholder="111" v-model="value5" controls-position="right" :max="5" :min="0" size="small"></mj-input-number>
				<div class="page-desc mt10">通过设置<code>size</code>属性为<code>large</code>和<code>small</code>将输入框设置为大和小尺寸，不设置为默认（中）尺寸。</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-input-number v-model="value5" controls-position="right" :max="5" :min="0">&lt;/mj-input-number>
					&lt;/template>
					&lt;script>
					export default {
						data() {
						    return {
						    	value5:1,
						    }
						},	
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="InputNumber 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>value</td>
            		<td>当前值，可以使用 v-model 双向绑定数据</td>
            		<td>Number</td>
            		<td></td>
            	</tr>
            	<tr>
            		<td>max</td>
            		<td>最大值</td>
            		<td>Number</td>
            		<td>Infinity</td>
            	</tr>
            	<tr>
            		<td>min</td>
            		<td>最小值</td>
            		<td>Number</td>
            		<td>-Infinity</td>
            	</tr>
            	<tr>
            		<td>step</td>
            		<td>每次改变的步伐，可以是小数</td>
            		<td>Number</td>
            		<td>1</td>
            	</tr>
            	<tr>
            		<td>disabled</td>
            		<td>设置禁用状态</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>placeholder</td>
            		<td>占位文本</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>size</td>
            		<td>输入框尺寸，可选值为<code>large</code>、<code>small</code>、或者不填</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            </tbody>
        </table>

        <mj-title type="h6" title="InputNumber 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>绑定值被改变时触发</td>
                    <td>value</td>
                </tr>
                <tr>
                	<td>blur</td>
                	<td>失焦时触发</td>
                	<td>value</td>
                </tr>
                <tr>
                	<td>focus</td>
                	<td>聚焦时触发</td>
                	<td>value</td>
                </tr>
            </tbody>
        </table>
	</div>
</template>

<script>
export default {
	data() {
	    return {
	    	value:1,
	    	value2:1,
			value3:1,
			value4:1,
			value5:0,
	    }
	},	
	methods:{
		onfocus(val){
			console.log('focus',val)
		},
		onblur(val){
			console.log('blur',val)
		},
		onchange(val){
			console.log('change',val)
		}

	}
}
</script>